<template>
  <div>
    <canvas id="renderCanvas"></canvas>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders/glTF'; // 引入 GLTF 加载器
let scene, canvas, engine,camera
onMounted(() => {
  canvas = document.getElementById('renderCanvas');
  engine = new BABYLON.Engine(canvas, true);
  scene = new BABYLON.Scene(engine);
  camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
  camera.attachControl(canvas, true);
  const runRenderLoop = () => {
    engine.runRenderLoop(() => {
      scene.render();
    });
  };

  runRenderLoop();

  onUnmounted(() => {
    engine.dispose();
  });


  start()
});


const start=()=>{




}

</script>

<style scoped>
#renderCanvas {
  width: 100%;
  height: 100vh;
}
</style>